<template>
	<view class="cu-list menu-avatar">
		<view class="cu-item">
			<view class="cu-avatar round lg" :style="'background-image:url('+user.avatar+');'"></view>
			<view class="content flex-sub">
				<view v-if="uid==user.id">[自己]</view>
				<view v-else>
					{{user.name}} <text v-if="dis!=null" class="text-grey text-sm margin-left-xs"></text>
					<button class="cu-btn radius sm bg-orange margin-left-sm" style="padding: 0px 6px;height:18px;" @tap="showUserDetail()">详情</button>
				</view>
				
				<view class="text-gray text-sm">
					{{GetDateDiff(detail.updatedAt)}} <text class="margin-left-xs" v-if="detail.city!=null">{{detail.city}} (据您{{dis}}千米)</text>
				</view>
			</view>
			<view class="action" style="width:200rpx;">
				<view v-if="uid!=user.id">
					
					<btnSwitch :isOn="isFollow" :isLoading="loading"
								@tapOff="addFlow(user.id)"
								@tapOn="removeFlow(user.id)" />
								
				</view>
				<button class="cu-btn bg-gray round" disabled="" v-else>
					{{title}}
				</button>
			</view>
		</view>
		
		<!-- 个人详情窗口 begin -->
		<userDetailWin :showModel="showUserDetailModel" :userId="user.id"  @closeWin="closeUserDetailWin"  />
		<!-- 个人详情窗口 end -->		
		
	</view>
</template>

<script>
	import btnSwitch from "@/components/btn-switch/btn-switch.vue";
	import {getDateDiff,getDateDiffMinute} from '@/utils/date/date.js';
	import userDetailWin from "@/components/user-detail-win/user-detail-win"
	import * as confirm from '@/common/confirm.js'
	import * as util from '@/common/util.js'
	
	export default {
		components:{
			userDetailWin,
			btnSwitch
		},
		data() {
			return {
				loading:false,
				isFollow:false,
				showUserDetailModel:false,
				dis:null
			};
		},
		name: 'detail-avatar',
		props: {
			detail: {
				type: Object,
				default: {}
			},
			user:{
				type: Object,
				default: {}
			},
			uid: {
				type: Number,
				default: 0
			},
			title:{
				type:String,
				default:''
			}
		},
		created() {
			this.isFollow=this.detail.isFollow
			let gps=this.$store.getters.loadStoreGps
			if(gps.lat){
				this.dis=util.getDistance(this.detail.lng,this.detail.lat,gps.lng,gps.lat)
			}
		},
		methods: {
			//取得时间间隔
			GetDateDiff:function(e){
				return getDateDiff(e)
			},
			//取得时间间隔
			GetDateDiffMinute:function(e){
				return getDateDiffMinute(e)
			},
			//加关注
			addFlow(uid){
				this.loading=true
				this.$api.post('/follow/save',{followedId:uid}).then(res => {
					if(res.code==200){
						this.isFollow=true
					}else{
						confirm.error(res.msg)
					}
				}).finally(()=>{
					this.loading=false
				})
			},
			//取消关注
			removeFlow(uid){
				this.loading=true
				this.$api.post('/follow/remove',{followedId:uid}).then(res => {
					if(res.code==200){
						this.isFollow=false
					}else{
						confirm.error("取消关注出错!!")
					}
				}).finally(()=>{
					this.loading=false
				})
			},
			showUserDetail(){
				this.showUserDetailModel=true
			},
			closeUserDetailWin(){
				this.showUserDetailModel=false
			},
		}
	}
</script>

<style>

</style>
